﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery 尺寸</title>
        <script src="js/jquery-3.6.1.min.js"></script>
		<style>
		div{
			width:200px;
			height:200px;
			border:7px solid silver;
			background-color:lightblue;
			margin:20px;
			padding:20px;
		}
		button{
		    margin-left:20px;
		}
		</style>
    </head>
    <body>
        <h3>jQuery 尺寸</h3>
        <hr>
        <div>
		    <h4>测试元素div的尺寸</h4>
			<p>测试前。</p>
		</div>
        <button>获取元素div的尺寸</button>
        <script>
            $(document).ready(function() {
				//按钮的点击事件：清空<div>元素
                $("button").click(function() {
					var w = $("div").width();
					var h = $("div").height();
					var iw = $("div").innerWidth();
					var ih = $("div").innerHeight();
					var ow = $("div").outerWidth();
					var oh = $("div").outerHeight();
					var ow2 = $("div").outerWidth(true);
					var oh2 = $("div").outerHeight(true); 			
					$("p").html("width："+w+"px<br>height："+h
					+"px<br>innerWidth："+iw+"px<br>innerHeight："+ih
					+"px<br>outerWidth："+ow+"px<br>outerHeight："+oh
					+"px<br>outerWidth(true)："+ow2+"px<br>outerHeight(true)："+oh2+"px");		
                });
            });
        </script>
	</body>
</html>
